<script setup>
import html2canvas from "html2canvas";
import { ref, onMounted, reactive,computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
const first = ref('')
const textList = ref([])
const id = ref('')
const top = ref('')
const middle = ref('')
const bottom = ref('')
const fbl = ref('w')
const line = reactive(
    [
        [],[],[],[],[],[],[],[],[],[],[]
    ]
)
const temList = computed(()=>{
    return[
    {
        id:1,
        img:fbl.value=='h'?'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/fmian_img_fmian1.png':'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/fmian_img_hb_fmian1.png',
        topClass:fbl.value=='h'?'class-top1':'class-topw1',
        middleClass:fbl.value=='h'?'class-middle1':'',
        bottomClass:fbl.value=='h'?'class-bottom1':'class-bottomw1',
        bgi:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/fenzhu7.png',
        bgiCss:fbl.value=='h'?'class-bgi1':'class-bgiw1'
    },
    {
        id:2,
        img:fbl.value=='h'?'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/fmian_img_fmian3.png':'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/fmian_img_hb_fmian2.png',
        topClass:fbl.value=='h'?'class-top2':'class-topw2',
        middleClass:fbl.value=='h'?'class-middle2':'',
        bottomClass:fbl.value=='h'?'class-bottom2':'class-bottomw2',
        bgi:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/fmian_img_fmian3_1.png',
        bgiCss:fbl.value=='h'?'class-bgi2':'class-bgiw2'
    },
    {
        id:3,
        img:fbl.value=='h'?'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/fmian_img_fmian4.png':'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/fmian_img_hb_fmian3.png',
        topClass:fbl.value=='h'?'class-top3':'class-topw3',
        middleClass:fbl.value=='h'?'class-middle3':'',
        bottomClass:fbl.value=='h'?'class-bottom3':'class-bottomw3',
        bgi:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/fenzhu7.png',
        bgiCss:fbl.value=='h'?'class-bgi3':'class-bgiw3'
    },
    {
        id:4,
        img:fbl.value=='h'?'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/fmian_img_fmian5.png':'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/fmian_img_hb_fmian4.png',
        topClass:fbl.value=='h'?'class-top4':'class-topw4',
        middleClass:'class-middle4',
        bottomClass:fbl.value=='h'?'class-bottom4':'class-bottomw4',
        bgi:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/fmian_img_fmian5_1.png',
        bgiCss:fbl.value=='h'?'class-bgi4':'class-bgiw4'
    },
    {
        id:5,
        img:fbl.value=='h'?'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/fmian_img_fmian6.png':'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/fmian_img_hb_fmian5.png',
        middleClass:'class-middle5',
        topClass:fbl.value=='w'?'class-topw5':'',
        bottomClass:fbl.value=='w'?'class-bottomw5':'',
    },
]})
onLoad((e)=>{
    console.log(e.id);
    console.log(e.text);
    const x = decodeURIComponent(e.text)
    console.log(JSON.parse(x.split('#')[0]));
    id.value = e.id
    textList.value = JSON.parse(x.split('#')[0])
    // textList.value = ["俺是个发生过", "阿斯顿噶士大夫和", "的发货速度放缓", "速度放缓",'asdasd','啊工具栏控件','asklglkj','sdfhjsdf','啊工具栏控件','啊工具栏控件','啊工具栏控件','啊工具栏控件','啊工具栏控件','啊工具栏控件']
    let num = 0
    let n = 0
    textList.value.forEach(e=>{
        if(n%3==0&&n!=0)num++
        line[num].push(e)
        n++
    })
    line.value = line.filter(e=>e.length)
    console.log(line.value);
    getVideo1Fps()
    getTtf()
})

const getTtf = () => {
    uni.loadFontFace({
    family: "gj",
    source:
      'url("https://www.diandianyouke.site:801/fileDataBase/static/stag/static/ttf/ztgj.ttf")',
    // 'url("src\static\ztgj.ttf")',
    success() {console.log('成功');},
    fail(err){console.log('失败');console.log(err);}
  });
    uni.loadFontFace({
    family: "wy",
    source:
      'url("https://www.diandianyouke.site:801/fileDataBase/static/stag/static/ttf/wyW8.TTF")',
    success() {},
  });
    uni.loadFontFace({
    family: "mzwc",
    source:
      'url("https://www.diandianyouke.site:801/fileDataBase/static/stag/static/ttf/mzwc.ttf")',
    success() {},
  });
    uni.loadFontFace({
    family: "hklj",
    source:
      'url("https://www.diandianyouke.site:801/fileDataBase/static/stag/static/ttf/hklj.TTF")',
    success() {},
  });
    uni.loadFontFace({
    family: "ztq",
    source:
      'url("https://www.diandianyouke.site:801/fileDataBase/static/stag/static/ttf/ztq.ttf")',
    success() {},
  });
    
}
const getVideo1Fps = async() => {
    console.log(id.value);
    const res = await uni.request({
        url: 'https://www.diandianyouke.cn:8081/api/getVideo1Fps',
        data: {
            businessId:id.value
        },
        header: {
            "Content-Type": "application/x-www-form-urlencoded",
        },
        method: 'POST',
    })
    console.log(res);
    if(!res.data.data) return uni.showToast({title:'请求失败',icon:'none'})
    first.value = res.data.data.path
    fbl.value = res.data.data.fbl
    console.log(fbl.value);
console.log(temList.value);
}
const active = ref(1)
const chooseActive = (e) => {
    active.value = e
}

const isFocus = ref(0)
const focus = (n) => {
    console.log(n);
    isFocus.value = n
}

const isChecked = ref(0)
const check = (e) => {
    isChecked.value = e
    console.log(isChecked!='kong'&&(isChecked!=4||fbl=='w'));
}

const save = () => {
    uni.showLoading()
    document.body.scrollTop = document.documentElement.scrollTop = 0;
    const query = document.querySelector(".image");
    setTimeout(()=>{
        html2canvas(query, { 
        scale:2,
        useCORS: true, // 允许加载跨域的图片
        allowTaint: false,
        tainttest: true, // 检测每张图片都已经加载完成
        logging: true,
        backgroundColor: null }).then((canvas) => {
        const dataURL = canvas.toDataURL("image/png");
        console.log(dataURL);
        const substring = dataURL.split(",")[1];
        uni.request({
            url: 'https://www.diandianyouke.cn:8081/api/addVideo1Fps',
            data: {
                imgFile:substring,
                businessId:id.value
            },
            header: {
                "Content-Type": "application/x-www-form-urlencoded",
            },
            method: 'POST',
            success:(res)=>{
                uni.hideLoading()
                console.log(res);
                location.href='https://www.xingchengwenhua.com:8080/html/home.html'
            },
            error:(err)=>{
                console.log(err);
                uni.hideLoading()
                uni.showToast({
                    title: '出错了',
                    icon: 'error',
                })
            }
        })

    })
    },1000)
}

const textClick = (e) => {
    if(isFocus.value==0)return
    if(isFocus.value==1)return top.value = e
    if(isFocus.value==2)return middle.value = e
    if(isFocus.value==3)return bottom.value = e
}

const isLoad = ref(0)
const load = () => {
    console.log('图片加载完毕');
    isLoad.value = 1
}

</script>


<template>
  <div class="page">
        <div class="image">
            <view class="load6" v-if="!isLoad">
                <div class="bounce1"></div>
                <div class="bounce2"></div>
                <div class="bounce3"></div>
            </view>
            <image @load="load" class="canvas" :src="first" style="width: 378rpx;height: 672rpx;"/>
            <div v-if="isChecked!='kong'&&(isChecked!=4||fbl=='w')&&isLoad" :class="temList[isChecked].topClass" class="img-top">{{ top?top:'输入文字' }}</div>
            <div v-if="isChecked!='kong'&&fbl!='w'&&isLoad" :class="temList[isChecked].middleClass" class="img-middle">{{ middle?middle:'输入文字' }}</div>
            <div v-if="isChecked!='kong'&&(isChecked!=4||fbl=='w')&&isLoad" :class="temList[isChecked].bottomClass" class="img-bottom">{{ bottom?bottom:'输入文字' }}</div>
            <image v-if="isChecked!='kong'&&isChecked!=4&&isLoad" :class="temList[isChecked].bgiCss" :src="temList[isChecked].bgi"/>
        </div>
        
        <div class="bottom">
            <button class="save" @click="save">保存封面</button>
            <view class="tab">
                <view class="tab-top">
                  <text @click="chooseActive(1)" :class="active==1?'purple':''">样式</text>
                  <text @click="chooseActive(2)" :class="active==2?'purple':''">编辑</text>
                </view>
                <view class="line" :class="active==2?'left':''"></view>
            </view>
            <scroll-view style="white-space: nowrap;height: 626rpx;" scroll-x v-if="active==1">
                <div class="kong" @click="check('kong')" :class="isChecked=='kong'?'active':''">
                    <image style="width: 100%;height: 100%;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/fmian_img_fmian0.png"/>
                    <image
                      v-if="isChecked == 'kong'"
                      class="poa"
                      src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_xzong.png"
                    />
                </div>
                
                <div class="kong" @click="check(index)" :class="isChecked==index?'active':''" v-for="item,index in temList" :key="item.id">
                    <image style="width: 100%;height: 100%;" :src="item.img"/>
                    <image
                      v-if="isChecked == index"
                      class="poa"
                      src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_xzong.png"
                    />
                </div>

            </scroll-view>
            <scroll-view scroll-y style="height: 626rpx;" v-if="active==2">
                <input v-if="fbl!='h'||isChecked!=4" v-model="top" @focus="focus(1)" :class="isFocus==1?'active':''" class="ipt" type="text" placeholder="请输入文字">
                <input v-if="fbl=='h'" v-model="middle" @focus="focus(2)" :class="isFocus==2?'active':''" class="ipt" type="text" placeholder="请输入文字">
                <input v-if="fbl!='h'||isChecked!=4" v-model="bottom" @focus="focus(3)" :class="isFocus==3?'active':''" class="ipt" type="text" placeholder="请输入文字">
                <scroll-view scroll-x class="texts" :class="fbl=='w'?'active-text':''">
                    <div class="lines" v-for="item,i in line" :key="i">
                        <div class="column" @click="textClick(e)" v-for="e in item">{{ e }}</div>
                    </div>
                </scroll-view>
            </scroll-view>
        </div>
  </div>
</template>

<style lang="scss">
    .page{
        position: fixed;
        background-color: rgb(31, 31, 31);
        width: 100%;
        height: 100%;
        /* load6 */
        .load6 {
          margin: 200rpx auto 0;
          width: 300rpx;
          text-align: center;
        }
        .load6 > div {
          width: 60rpx;
          height: 60rpx;
          background-color: rgb(142, 84, 244);
          border-radius: 100%;
          display: inline-block;
          -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
          animation: bouncedelay 1.4s infinite ease-in-out;
          -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
        }
        .load6 .bounce1 {
          -webkit-animation-delay: -0.32s;
          animation-delay: -0.32s;
        }
        .load6 .bounce2 {
          -webkit-animation-delay: -0.16s;
          animation-delay: -0.16s;
        }
        @-webkit-keyframes bouncedelay {
          0%, 80%, 100% { -webkit-transform: scale(0.0) }
          40% { -webkit-transform: scale(0.7) }
        }
        @keyframes bouncedelay {
          0%, 80%, 100% {
            transform: scale(0.0);
            -webkit-transform: scale(0.0);
          } 40% {
            transform: scale(0.7);
            -webkit-transform: scale(0.7);
          }
        }
        .image{
            width: 378rpx;
            height: 672rpx;
            position: absolute;
            top: 0;
            left: 186rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            .img-top{
            position: absolute;
            top: 100rpx;
            z-index: 9;
            min-width: 136rpx;
            min-height: 56rpx;
            text-align: center;
            line-height: 56rpx;
        }
        .img-middle{
                position: absolute;
                top: 292rpx;
                z-index: 9;
                min-width: 160rpx;
                min-height: 48rpx;
                text-align: center;
                line-height: 48rpx;
            }
            .img-bottom{
                position: absolute;
                bottom: 148rpx;
                z-index: 9;
                min-width: 112rpx;
                min-height: 40rpx;
                text-align: center;
                line-height: 40rpx;
            }
        }
        
        .bottom{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 720rpx;
            border-radius: 32rpx 32rpx 0 0;
            background-color: #fff;
            padding: 30rpx;
            box-sizing: border-box;
            z-index: 999;
            .save{
            position: absolute;
            top: -100rpx;
            right: 24rpx;
            width: 144rpx;
            height: 64rpx;
            border-radius: 8rpx;
            background-color: rgb(142,84,244);
            color: #fff;
            font-size: 28rpx;
            line-height: 64rpx;
            text-align: center;
            padding: 0;
        }
            .kong{
                position: relative;
                display: inline-block;
                width: 216rpx;
                height: 384rpx;
                border-radius: 12rpx;
                margin-right: 42rpx;
                margin-top: 30rpx;
                border: 1px solid transparent;
                .poa{
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 56rpx;
                    height: 34rpx;
                    // border-radius: 0 0 0 32rpx;
                }
            }
            .tab{
                width: 162rpx;
                height: 54rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .tab-top{
                  display: flex;
                  justify-content: space-between;
                  color: rgb(144,147,153);
                  font-size: 30rpx;
                }
                .line{
                  width: 30rpx;
                  height: 4rpx;
                  background-color: rgb(142, 84, 244);
                  border-radius: 214rpx;
                  transform: translateX(16rpx);
                  transition: all 0.5s;
                }
                .left{
                  transform: translateX(118rpx);
                }
                .purple{
                  color: rgb(142, 84, 244);
                }
            }
            .ipt{
                width: 690rpx;
                height: 80rpx;
                margin: 30rpx 0;
                padding: 18rpx 42rpx;
                background-color: rgb(249,249,249);
                border: 1px solid transparent;
                box-sizing: border-box;
                border-radius: 570rpx;
                &:nth-child(2){
                    margin: 0;
                }
                &:nth-child(3){
                    margin-bottom: 48rpx;
                }
            }
            .active-text{
                margin-top: 48rpx;
            }
            .texts{
                white-space: nowrap;
                .lines{
                    margin-bottom: 30rpx;
                    .column{
                        display: inline-block;
                        padding: 10rpx 36rpx;
                        background-color: #000;
                        color: #fff;
                        font-size: 28rpx;
                        margin-right: 30rpx;
                        border-radius: 424rpx;
                    }
                }
            }
        }
    }
    .active{
        border: 1px solid rgb(142, 84, 244) !important;
    }
    @font-face {
    font-family: 'gj';
    src: url('../../static/AaMianHuatang.woff');
    }
    .class-top1{
        background-color: rgb(249,222,4);
        font-size: 32rpx;
        font-family: 'hklj';
    }
    .class-topw1{
        top: 118rpx !important;
        background-color: rgb(249,222,4);
        font-size: 32rpx;
        font-family: 'hklj';
    }
    .class-middle1{
        font-size: 40rpx;
        font-family: 'mzwc';
        color: #fff;
        text-shadow: 2rpx 0 rgb(217,28,60), -2rpx 0 rgb(217,28,60), 0 2rpx rgb(217,28,60), 0 -2rpx rgb(217,28,60);
    }
    .class-bottom1{
        font-size: 32rpx;
        font-family: 'hklj';
        color: #fff;
        text-shadow: 2rpx 0 #000, -2rpx 0 #000, 0 2rpx #000, 0 -2rpx #000;
    }
    .class-bottomw1{
        bottom: 142rpx !important;
        font-size: 32rpx;
        font-family: 'hklj';
        color: #fff;
        text-shadow: 2rpx 0 #000, -2rpx 0 #000, 0 2rpx #000, 0 -2rpx #000;
    }
    .class-bgi1{
        position: absolute;
        width: 330rpx;
        height: 24rpx;
        bottom: 144rpx;
        left: 24rpx;
        z-index: 1;
    }
    .class-bgiw1{
        position: absolute;
        width: 330rpx;
        height: 24rpx;
        bottom: 138rpx;
        left: 24rpx;
        z-index: 1;
    }
    .class-top2{
        color: rgb(249,222,4);
        font-size: 32rpx;
        font-family: 'hklj';
        text-shadow: 2rpx 0 #000, -2rpx 0 #000, 0 2rpx #000, 0 -2rpx #000;
    }
    .class-topw2{
        top: 142rpx !important;
        color: rgb(249,222,4);
        font-size: 32rpx;
        font-family: 'hklj';
        text-shadow: 2rpx 0 #000, -2rpx 0 #000, 0 2rpx #000, 0 -2rpx #000;
    }
    .class-middle2{
        font-size: 40rpx;
        font-family: 'hklj';
        color: #000;
        background-color: #fff;
    }
    .class-bottom2{
        top: 484rpx !important;
        font-size: 32rpx;
        font-family: 'hklj';
        color: #fff;
        text-shadow: 2rpx 0 rgb(217,28,60), -2rpx 0 rgb(217,28,60), 0 2rpx rgb(217,28,60), 0 -2rpx rgb(217,28,60);
    }
    .class-bottomw2{
        bottom: 142rpx !important;
        font-size: 32rpx;
        font-family: 'hklj';
        color: #fff;
        text-shadow: 2rpx 0 rgb(217,28,60), -2rpx 0 rgb(217,28,60), 0 2rpx rgb(217,28,60), 0 -2rpx rgb(217,28,60);
    }
    .class-bgi2{
        position: absolute;
        width: 214rpx;
        height: 37rpx;
        top: 494rpx;
        left: 82rpx;
        z-index: 1;
    }
    .class-bgiw2{
        position: absolute;
        width: 214rpx;
        height: 37rpx;
        bottom: 135rpx;
        left: 82rpx;
        z-index: 1;
    }
    .class-top3{
        background-color: rgb(249,222,4);
        font-size: 32rpx;
        font-family: 'hklj';
    }
    .class-topw3{
        top: 118rpx !important;
        background-color: rgb(252,24,59);
        font-size: 32rpx;
        font-family: 'hklj';
    }
    .class-middle3{
        font-size: 40rpx;
        font-family: 'hklj';
        color: #fff;
        background-color: rgb(252,24,59);
    }
    .class-bottom3{
        font-size: 32rpx;
        font-family: 'hklj';
        color: #fff;
        text-shadow: 2rpx 0 #000, -2rpx 0 #000, 0 2rpx #000, 0 -2rpx #000;
    }
    .class-bottomw3{
        bottom: 142rpx !important;
        font-size: 32rpx;
        font-family: 'hklj';
        color: #fff;
        text-shadow: 2rpx 0 #000, -2rpx 0 #000, 0 2rpx #000, 0 -2rpx #000;
    }
    .class-bgi3{
        position: absolute;
        width: 330rpx;
        height: 24rpx;
        bottom: 144rpx;
        left: 24rpx;
        z-index: 1;
    }
    .class-bgiw3{
        position: absolute;
        width: 330rpx;
        height: 24rpx;
        bottom: 138rpx;
        left: 24rpx;
        z-index: 1;
    }
    .class-top4{
        background-color: #000;
        font-size: 32rpx;
        font-family: 'hklj';
        color: rgb(130,227,182);
    }
    .class-topw4{
        top: 142rpx !important;
        font-size: 32rpx;
        font-family: 'hklj';
        color: rgb(130,227,182);
    }
    .class-middle4{
        font-size: 40rpx;
        font-family: 'gj';
        color: #fff;
        text-shadow: 2rpx 0 #000, -2rpx 0 #000, 0 2rpx #000, 0 -2rpx #000;
        top: 240rpx !important;
    }
    .class-bottom4{
        bottom: 234rpx !important;
        font-size: 32rpx;
        font-family: 'hklj';
        color: #fff;
        text-shadow: 2rpx 0 rgb(217,28,60), -2rpx 0 rgb(217,28,60), 0 2rpx rgb(217,28,60), 0 -2rpx rgb(217,28,60);
    }
    .class-bottomw4{
        bottom: 138rpx !important;
        font-size: 32rpx;
        font-family: 'hklj';
        color: #fff;
        text-shadow: 2rpx 0 rgb(217,28,60), -2rpx 0 rgb(217,28,60), 0 2rpx rgb(217,28,60), 0 -2rpx rgb(217,28,60);
    }
    .class-bgi4{
        position: absolute;
        width: 220rpx;
        height: 39rpx;
        bottom: 231rpx;
        left: 80rpx;
        z-index: 1;
    }
    .class-bgiw4{
        position: absolute;
        width: 220rpx;
        height: 39rpx;
        bottom: 135rpx;
        left: 80rpx;
        z-index: 1;
    }
    .class-middle5{
        font-size: 36rpx;
        font-family: 'hklj';
        color: rgb(249,222,4);
        text-shadow: 2rpx 0 #000, -2rpx 0 #000, 0 2rpx #000, 0 -2rpx #000;
        width: 100%;
        min-height: 96rpx !important;
        background-color: rgba(0,0,0,0.3);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .class-topw5{
        min-height: 40rpx !important;
        background-color: #fff;
        top: 108rpx !important;
        font-size: 40rpx;
        font-family: 'hklj'; 
        line-height: 40rpx !important;
    }
    .class-bottomw5{
        bottom: 136rpx !important;
        font-size: 40rpx;
        font-family: 'gj';
        color: #fff;
        text-shadow: 2rpx 0 #000, -2rpx 0 #000, 0 2rpx #000, 0 -2rpx #000;
    }
</style>
